<template lang="html">
   <div class='news'>
     <el-carousel arrow="hover" height="180px">
      <el-carousel-item v-for="(item, index) in bannerNews" :key="index">
        <a :href="item.article_url" class="imgLink">
          <img :src="item.image_url_big" alt="" height="180px" width="100%">
        </a>
      </el-carousel-item>
     </el-carousel>
     <div class='newList'>
       <ul>
         <li v-for="(item, index) in newstNews" :key="index">
           <a class='listLink' :href="item.article_url">
            <div class='imgList'><img :src="item.image_url_small" alt="" /></div>
            <div class='msgList'>
              <p class="title">{{ item.title }}</p>
              <p class="summary">{{ item.summary }}</p>
              <p class="time">
                {{ item.publication_date.split(' ')[0] }}
                <span class="pv">
                  {{item.pv | pv}}阅
                </span>
              </p>
            </div>
           </a>
         </li>
       </ul>
     </div>
   </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { pv } from '@/filters';

export default {
  data: () => ({
  }),
  created() {
    Promise.all([this.getNewstNews(), this.getBannerNews()])
      .then(() => {
      })
      .catch((err) => {
        this.$alert(err.errorMsg || '网络摔了一跤，等下再来吧', '获取信息失败', {
          confirmButtonText: '确定',
          type: 'error',
          callback: () => false,
        });
      });
  },
  computed: {
    ...mapState(['bannerNews', 'newstNews']),
  },
  methods: {
    ...mapActions(['getBannerNews', 'getNewstNews']),
  },
  filters: {
    pv,
  },
};
</script>

<style lang="css" scoped>
  .imgLink {
    width: 100%;
    height: 180px;
    display: inline-block;
  }
  .newList{
    background: #f0f0f0;
    padding: 0 10px;
    padding-top: 5px;
    padding-bottom: 50px;
  }
  .newList ul,.newList li {
    width: 100%;
    padding-left: 0px;
  }
  .newList li{
    background: #fff;
    padding: 10px;
    margin: 5px 0;
  }
  .newList li .listLink{
    color: #333;
  }
  .imgList, .msgList {
    display: inline-block;
    vertical-align: middle;
  }
  .imgList img {
    width: 90px;
    height: 90px;
  }
  .msgList {
    width: 230px;
    margin-left: 10px;
  }
  .title{
    font-size: 14px;
  }
  .summary{
    font-size: 12px;
    color: #999;
    padding: 2px 0;
  }
  .time{
    font-size: 12px;
    color: #999;
  }
  .pv{
    color: goldenrod;
  }
</style>
